<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="1000"
    switchFullscreen
    @cancel="handleCancel"
  >
    <template slot="footer">
      <div>
        <!--        <a-button v-if="status == 0" type="white" @click="handleCancel">取消</a-button>-->
        <a-button v-if="status == 0" type="primary" @click="handleOk">提交</a-button>
      </div>
    </template>
    <a-card :bordered="false">
      <a-form :form="form">
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电姓名">
              <a-input v-if="status == 1"
                       v-decorator="['name', { rules: [{ required: true, message: '请输入来电姓名', trigger: 'blur' }]
                }]"
                       placeholder="请输入来电姓名"
                       read-only
              />
              <a-input v-else-if="status == 0"
                       v-decorator="['name', { rules: [{ required: true, message: '请输入来电姓名', trigger: 'blur' }]
                }]"
                       placeholder="请输入来电姓名"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电号码">
              <a-input v-if="status == 1"
                       v-decorator="['phone', { rules: [{ required: true, message: '请输入来电号码', trigger: 'blur' }]
                }]"
                       placeholder="请输入来电号码"
                       read-only
              />
              <a-input v-else-if="status == 0"
                       v-decorator="['phone', { rules: [{ required: true, message: '请输入来电号码', trigger: 'blur' }]
                }]"
                       placeholder="请输入来电号码"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="咨询类型">
              <a-select v-if="status == 0"
                        v-decorator="['call_type', { rules: [{ required: false, message: '请选择咨询类型' }] }]"
                        placeholder="请选择咨询类型"
                        @select="selectStore"
              >
                <a-select-option
                  v-for="item in consultationType"
                  :key="item.key"
                  :value="item.key"
                >{{ item.value }}
                </a-select-option>
              </a-select>
              <a-input v-else-if="status == 1"
                       v-decorator="['call_type', { rules: [{ required: true, trigger: 'blur' }]
                }]"
                       read-only
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电时间">
              <a-date-picker v-if="status == 0"
                             showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="['call_time', {}]" style="width: 100%"/>
              <a-input v-else-if="status == 1"
                       v-decorator="['call_time', { rules: [{ required: true, message: '请输入来电时间', trigger: 'blur' }]
                }]"
                       placeholder="格式如：2022-01-01 17:19"
                       read-only
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="办理状态">
              <a-select v-if="status == 0"
                        v-decorator="['status', { rules: [{ required: false, message: '请选择办理状态' }] }]"
                        placeholder="请选择办理状态"
                        @select="selectStore"
              >
                <a-select-option
                  v-for="item in handlingStatus"
                  :key="item.key"
                  :value="item.key"
                >{{ item.value }}
                </a-select-option>
              </a-select>

              <a-input v-else-if="status == 1"
                       v-decorator="['status', { rules: [{ required: true, trigger: 'blur' }]
                }]"
                       read-only
              />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="咨询内容">
              <a-textarea v-if="status == 0"
                          v-decorator="['content', { rules: [{ required: false, message: '请输入咨询内容', trigger: 'blur' }]}]"
                          placeholder="请输入咨询内容" :rows="4" style="margin-top: 5px;"/>
              <a-textarea v-else-if="status == 1"
                          v-decorator="['content', { rules: [{ required: false, message: '请输入咨询内容', trigger: 'blur' }]}]"
                          placeholder="请输入咨询内容" :rows="4" style="margin-top: 5px;" read-only/>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="答复内容">
              <a-textarea v-if="status == 0"
                          v-decorator="['reply', { rules: [{ required: false, message: '请输入答复内容', trigger: 'blur' }]}]"
                          placeholder="请输入答复内容" :rows="4" style="margin-top: 5px;"/>
              <a-textarea v-else-if="status == 1"
                          v-decorator="['reply', { rules: [{ required: false, message: '请输入答复内容', trigger: 'blur' }]}]"
                          placeholder="请输入答复内容" :rows="4" style="margin-top: 5px;" read-only/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
              <a-textarea v-if="status == 0"
                          v-decorator="['remark', { rules: [{ required: false, message: '请输入备注', trigger: 'blur' }]}]"
                          placeholder="请输入备注" :rows="4" style="margin-top: 5px;"/>
              <a-textarea v-else-if="status == 1"
                          v-decorator="['remark', { rules: [{ required: false, message: '请输入备注', trigger: 'blur' }]}]"
                          placeholder="请输入备注" :rows="4" style="margin-top: 5px;" read-only/>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
      <a-row class="BottomButtons">
      </a-row>

      <a-modal v-model="modalShow" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
        <div style='display: flex;justify-content: center;align-items: center'>
          <p style='word-break: keep-all;margin: 0 30px 0'>模板名称</p>
          <a-input style='width: 300px'/>
        </div>
      </a-modal>
    </a-card>
    <!--  </a-spin>-->
  </a-modal>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage'
import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapGetters } from 'vuex'

export default {
  name: 'callForConsultationModel',
  data() {
    return {
      modalShow: false,
      modalTitle: '另存为模板',
      status: 1,
      selectList: [
        {
          id: 1,
          option: '2021款汉DMI'
        },
        {
          id: 2,
          option: '选项1'
        },
        {
          id: 3,
          option: '选项2'
        },
        {
          id: 4,
          option: '选项3'
        }
      ],
      record: '',
      title: '交易信息',
      visible: false,
      model: {},
      noChooseBrand: true,
      loading: '',
      loading2: '',
      loading3: '',
      loading4: '',
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      imageUrl: '',
      imageUrl2: '',
      imageUrl3: '',
      imageUrl4: '',
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        edit: 'cxm/cxmCallInfo/edit'
      },
      showDing: false,
      showEnterpriseUscc: false,
      headers: '',
      picData: {},
      storeName: [],
      storeId: [],
      consultationType: [
        {
          key: 0,
          value: '购车前的网签咨询'
        }, {
          key: 1,
          value: '订单'
        }, {
          key: 2,
          value: '合同'
        }, {
          key: 3,
          value: '交付'
        }, {
          key: 4,
          value: '网签后的售后服务'
        }, {
          key: 5,
          value: '其他'
        }
      ],
      handlingStatus: [
        {
          key: 0,
          value: '待处理'
        }, {
          key: 1,
          value: '已处理'
        }
      ],
      storekeeperName: [],
      storekeeperId: [],
      checkboxgroupvalue: [],
      checkboxgroupvalue2: [],
      brandList: [],
      brandListAll: [],
      colorList: [],
      carModel: [],
      carModelAll: [],
      inColorList: [],
      supplierList: {},
      manufacturerList: {},
      shouxuList: [],
      zhuangbeiList: [],
      appearanceImg: '',
      qrCodeImg: '',
      nameplateImg: '',
      certificateImg: ''
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token, 'Content-Type': 'application/x-www-form-urlencoded' }
  },
  computed: {
    importImgAction: function() {
      return `${process.env.VUE_APP_BASE_API}${this.url.imgAction}`
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    showModal() {
      this.modalShow = true
    },
    hideModal() {
      this.modalShow = false
    },
    getData(record) {
      let httpurl = '/cxm/cxmCallInfo/getById' + '?id=' + record.id
      getAction(httpurl, {})
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
            this.model = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
    },

    add(record) {
      console.log(record)
      this.edit(record)
    },
    edit(record, type) {
      this.status = type
      this.form.resetFields()
      let httpurl = '/cxm/cxmCallInfo/getById' + '?id=' + record.id
      getAction(httpurl, {})
        .then((res) => {
          if (res.success) {
            this.model = res.result
            console.log(this.model)
            this.visible = true
            switch (this.model.call_type) {
              case '0':
                this.model.call_type = '购车前的网签咨询'
                break
              case '1':
                this.model.call_type = '订单'
                break
              case '2':
                this.model.call_type = '合同'
                break
              case '3':
                this.model.call_type = '交付'
                break
              case '4':
                this.model.call_type = '网签后的售后服务'
                break
              case '5':
                this.model.call_type = '其他'
                break
            }
            switch (this.model.status) {
              case '0':
                this.model.status = '待处理'
                break
              case '1':
                this.model.status = '已处理'
                break
            }
            this.$nextTick(() => {

              this.form.setFieldsValue({
                name: this.model.name,
                phone: this.model.phone,
                call_type: this.model.call_type,
                call_time: this.model.call_time,
                status: this.model.status,
                content: this.model.detail[0].content,
                reply: this.model.detail[0].reply,
                remark: this.model.detail[0].remark
              })

            })
          } else {
            this.$message.warning(res.message)
          }
        })
      // this.model = Object.assign({}, record)

    },
    close() {
      this.$emit('close')
      this.visible = false
      // this.$emit('refresh')
      this.$parent.$parent.refresh()
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {

        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          httpurl += this.url.edit
          method = 'put'
          let formData = Object.assign(this.model, values)
          console.log(formData)
          //时间格式化
          // if (formData.call_time) {
          //   console.log(formData.call_time)
          //   formData.call_time = formData.call_time.format('YYYY-MM-DD HH:mm:ss')
          // }
          formData.callTime = formData.call_time
          formData.callType = formData.call_type
          //formData.shouxuList = this.checkboxgroupvalue;
          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                console.log(formData.id)
                switch (this.model.status) {
                  case '待处理':
                    this.model.status = '0'
                    break
                  case '已处理':
                    this.model.status = '1'
                    break
                }
                let formData2 ={
                  id: this.model.detail[0].id,
                  status: formData.status,
                  reply: formData.reply,
                  remark: formData.remark,
                  content: formData.content
                }
                postAction('cxm/cxmCallInfoDetail/submitById', formData2)
                  .then((res) => {
                    console.log(res)
                    if (res.success) {
                      that.$message.success(res.message)
                      that.$emit('ok')
                    } else {
                      that.$message.warning(res.message)
                    }
                  })
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.close()

            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    selectStore(a) {
      console.log(a)
    },
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log('value = ', this.value)
    },
    onChange2(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log('value = ', this.value)
    },
    changeBrand(value) {
      this.carModel = []
      this.form.setFieldsValue({
        'carModel': []
      })
      this.noChooseBrand = false
      for (let i = 0; i < this.brandListAll.length; i++) {
        if (this.brandListAll[i].name == value) {
          for (let j = 0; j < this.carModelAll.length; j++) {
            if (this.carModelAll[j].parentId == this.brandListAll[i].id) {
              this.carModel.push(this.carModelAll[j].name)
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-upload-select-picture-card img {
  width: 128px;
  height: 128px;
}

.BottomButtons {
  text-align: center;
  margin-top: 70px;
}

.titleText {
  margin: 0 0 15px 5%;
}
</style>